<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
<!-- 1下载倒入Vue -->
    <style>
        v-cloak{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
    <!-- <p v-if="age >= 16">wosjisj</p> -->
    <!-- <p v-if="age < 16">wsj</p> -->
    <!-- <p v-if="show">wosjisj</p> -->
    <!-- <p v-if="hidden">sj</p> -->
    <!-- <p v-if="false">wosjisj</p> -->
    <!-- <p v-if="true">jscb</p> -->
<!-- <p v-if="age >= 18">成年人</p> -->
<!-- <p v-else>未成年人</p> -->
<p v-if="score >=80">优秀</p>
<p v-else-if="score>=60">良好</p>
<p v-else>差</p>

</div>
<script src="js/vue.js"></script>
<script>
//2创建一个Vue的实例对象
    let vue = new Vue({
//告诉VUE实例对象将来需要控制街面上的哪个区域
    el: '#app',
//4告诉Vue实例对象被控制的区域的数据是什么
    data: {show:true,
        hidden:false,
        age:18,
        score:70
    }
    });
</script>
</body>
</html>